<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.layui-inline{
	width:136px!important
}
</style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">  
    <div class="layui-card-body">
    <div class="layui-row layui-col-space3">
      
      <div class="layui-row">
      <div class="layui-inline">
         <input type="text" id="name" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-btn-group">
	    <button type="button" class="layui-btn layui-btn-primary" id="queryBtn" data-type="queryBtn">查询</button>
  	  </div>
  	  </div>
	  <div class="layui-row">
	    <div style="width:42%;float: left">
	  		<table id="post-table" lay-filter="post-table"></table>
	  	</div>
	    <div style="float: left;width:16%;text-align: center;height:520px;line-height: 520px;">
	    <div style="height:130px;">
	    <div id="moveRight" style="height:60px;"><i class="layui-icon layui-icon-right" style="font-size: 30px; color: #1E9FFF;"></i></div>
	    <div id="moveLeft" style="height:60px;"><i class="layui-icon layui-icon-left" style="font-size: 30px; color: #1E9FFF;"></i> </div> 
	    </div>
	    
	  	</div>
	    <div style="float: right;width:42%;margin:0 0">
	  		<table id="post-table2" lay-filter="post-table2"></table>
	  	</div>
	  </div>
	  
  </div>
  </div>
</div>
</div>
<script src="js/axios.js"></script>
 <script th:inline="javascript">
/*<![CDATA[*/
var userId=[[${userId}]]    
var roleCode=[[${roleCode}]]    
/*]]>*/
</script>
<script th:inline="none">
var currentRoleCodes = [];

layui.use(['table','form'], function(){
  var form = layui.form,
  upload = layui.upload
  ,table = layui.table;
  table.render({
	   elem: '#post-table'
	   ,url: 'role/getPageListExcludeAssigned'
	   ,where:{excludeCodes: roleCode}
	   ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field: 'id', title: 'ID',hide:true}
	      ,{field: 'code',title: '编码'}
	      ,{field: 'name',title: '角色名称'}
	   ]]
	   ,page: true
	   ,limit: 11
	   ,height: 520+'px'
	   ,text: '查无数据'
	   ,done:function(res, curr, count){
			enableRowClick(table,form,'post-table',"post-table");
	   }
  });
  table.render({
	   elem: '#post-table2'
	   ,url: 'role/getPageListAssigned'
	   ,where:{roleCode: roleCode?roleCode:"#"}
	   ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field: 'id', title: 'ID',hide:true}
	      ,{field: 'code', title: 'CODE'}
	      ,{field: 'name',title: '角色名称'}
	   ]]
	   ,page: false
	   ,limit: 11
	   ,height: 520+'px'
	   ,text: '查无数据'
	   ,done:function(res, curr, count){
		   var data = res.data;
		   for(var i=0;i<data.length;i++){
			   currentRoleCodes[i] = data[i].code;
		   }
		   enableRowClick(table,form,'post-table2',"post-table2");
	   }
  });
  $("#moveRight").on("click",function(e){
	  var checkStatus = table.checkStatus('post-table')
      ,checkData = checkStatus.data; 
	  if(checkData.length==0){
		  return false;
	  }
	  var leftCodes = [];
	  for(let i=0;i<checkData.length;i++){
		  leftCodes.push(checkData[i].code);
		 
	  }
	  var s = "," + currentRoleCodes.join(",") + ",";
	  $(leftCodes).each(function(j,v){
		  if(s.indexOf(","+v+",")==-1){
			  currentRoleCodes.push(v);
		  }
	  })
	  var whr2 = {roleCode: currentRoleCodes.join(","),userId:""};	
	  table.reload("post-table2",{where:whr2}) ;
	
	  var whr = {excludeCodes: currentRoleCodes.join(","),userId:""};	
	  table.reload("post-table",{where:whr}) ;
	  
  })
  $("#moveLeft").on("click",function(e){
	  var checkStatus = table.checkStatus('post-table2')
      ,checkData = checkStatus.data; 
	  var divs = $("#post-table2").parent("div").find("td[data-field=id] div");
	  if(checkData.length==0){
		  return false;
	  }
	  var rightCodes = [];
	  for(var i=0;i<checkData.length;i++){
		  rightCodes.push(checkData[i].code);
	  }
	  var s = currentRoleCodes.join(",") + ",";
	  $(rightCodes).each(function(j,v){
		  s = s.replace(v + ",","")
	  })
	  if(s.length>1){
		  currentRoleCodes = s.split(",");
	  }else{
		  currentRoleCodes = ['#'];
	  }
	  var whr2 = {roleCode: currentRoleCodes.join(","),userId:""};	
	  table.reload("post-table2",{where:whr2}) ;
	  var whr = {excludeCodes: currentRoleCodes.join(","),userId:""};	
	  table.reload("post-table",{where: whr}) ;
	  
  })
  
  window.getLeftCodes = function(){
	  
	  var divs = $("#post-table2").parent("div").find("td[data-field=code] div");
	  var divs2 = $("#post-table2").parent("div").find("td[data-field=name] div");
	  if(divs.length==0){
		  return false;
	  }
	  var rightIds = [];
	  divs.each(function(i,v){
		  rightIds.push(v.innerText)
	  })
	 var postCodes = [];
	 var postNames = [];
	 divs.each(function(i,v){
		 postCodes.push(v.innerText);
	 })
	 divs2.each(function(i,v){
		 postNames.push(v.innerText);
	 })
 	 return [postCodes,postNames];
  }
  var action = {
	queryBtn: function(){
		 var whr = {name:$('#name').val()};	 
		 table.reload("post-table",{where:whr}) 
	}
  };
  $('.layui-btn[data-type]').each(function(i,obj){
	  $(this).on('click', function(){
		   var type = $(this).data('type');
		   action[type].call(this);
	  })
  });
});
</script>
</body>